<template>
  <div id="line-chart" style="height: 300px; margin-top: 60px"></div>
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from "vue";
import * as echarts from "echarts";

const props = defineProps(["files1"]);

const files1 = ref(JSON.parse(localStorage.getItem("files1")) || []);

watch(
  () => props.files1,
  (newVal) => {
    // Update local storage when props.files1 changes
    localStorage.setItem("files1", JSON.stringify(newVal));
    files1.value = newVal;
    updateChart();
  }
);

onMounted(() => {
  updateChart();
});

const updateChart = () => {
  const chart = echarts.init(document.getElementById("line-chart"));
  const options = {
    title: {
      text: "文件大小",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["文件大小"],
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: files1.value.map((item) => item.filename),
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} MB",
      },
    },
    series: [
      {
        name: "文件大小",
        type: "line",
        data: files1.value.map((item) => item.size),
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
    ],
  };

  chart.setOption(options);
};
</script>

<style scoped>
#line-chart {
  width: 100%;
}
</style>
